<!--
 * @Descripttion:
 * @version:
 * @Date: 2021-04-20 11:06:21
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-09-24 18:18:43
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
-->
<template>
  <div ref="chartDom" :style="{ height: '100%', width: '100%' }"></div>
</template>
<script setup>
import * as echarts from 'echarts'
// 请确保在引入百度地图扩展之前已经引入百度地图 JS API 脚本并成功加载
// https://api.map.baidu.com/api?v=3.0&ak=你申请的AK
import 'echarts/extension/bmap/bmap'
import { onMounted, getCurrentInstance, ref } from 'vue'

import { useRouter } from 'vue-router'
import { getAllSite } from '@/api/site'
const router = useRouter()
const chartDom = ref()
let data = [
  // //进行排行的数据
  // {name: '廊坊', value: 193},
  // {name: '菏泽', value: 194},
  // {name: '合肥', value: 229},
  // {name: '武汉', value: 273},
  // {name: '大庆', value: 279}
]
let geoCoordMap = {
  // 廊坊: [116.7, 39.53],
  // 菏泽: [115.480656, 35.23375],
  // 合肥: [117.27, 31.86],
  // 武汉: [114.31, 30.52],
  // 大庆: [125.03, 46.58]
}
onMounted(async () => {
  await getAllSite().then(even => {
    console.log(even.data.data)
    data = even.data.data
    geoCoordMap = even.data.map.data
    console.log(data, geoCoordMap)
  })
  console.log(data, geoCoordMap)
  var myChart = echarts.init(chartDom.value)
  var option

  const convertData = function(data) {
    var res = []
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name]
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value),
        })
      }
    }
    return res
  }
  option = {
    backgroundColor: 'transparent',
    title: {
      text: '后台管理站点展示',
      subtext: '分布全国的站点',
      // sublink: 'http://www.pm25.in',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    bmap: {
      center: [120, 34.550339],
      zoom: 5,
      roam: true,
      mapStyle: {
        styleJson: [
          {
            featureType: 'water',
            elementType: 'all',
            stylers: {
              color: '#d1d1d1',
            },
          },
          {
            featureType: 'land',
            elementType: 'all',
            stylers: {
              color: '#f3f3f3',
            },
          },
          {
            featureType: 'railway',
            elementType: 'all',
            stylers: {
              visibility: 'off',
            },
          },
          {
            featureType: 'highway',
            elementType: 'all',
            stylers: {
              color: '#fdfdfd',
            },
          },
          {
            featureType: 'highway',
            elementType: 'labels',
            stylers: {
              visibility: 'off',
            },
          },
          {
            featureType: 'arterial',
            elementType: 'geometry',
            stylers: {
              color: '#fefefe',
            },
          },
          {
            featureType: 'arterial',
            elementType: 'geometry.fill',
            stylers: {
              color: '#fefefe',
            },
          },
          {
            featureType: 'poi',
            elementType: 'all',
            stylers: {
              visibility: 'off',
            },
          },
          {
            featureType: 'green',
            elementType: 'all',
            stylers: {
              visibility: 'off',
            },
          },
          {
            featureType: 'subway',
            elementType: 'all',
            stylers: {
              visibility: 'off',
            },
          },
          {
            featureType: 'manmade',
            elementType: 'all',
            stylers: {
              color: '#d1d1d1',
            },
          },
          {
            featureType: 'local',
            elementType: 'all',
            stylers: {
              color: '#d1d1d1',
            },
          },
          {
            featureType: 'arterial',
            elementType: 'labels',
            stylers: {
              visibility: 'off',
            },
          },
          {
            featureType: 'boundary',
            elementType: 'all',
            stylers: {
              color: '#fefefe',
            },
          },
          {
            featureType: 'building',
            elementType: 'all',
            stylers: {
              color: '#d1d1d1',
            },
          },
          {
            featureType: 'label',
            elementType: 'labels.text.fill',
            stylers: {
              color: '#999999',
            },
          },
        ],
      },
    },
    series: [
      {
        name: 'pm2.5',
        type: 'scatter',
        coordinateSystem: 'bmap',
        data: convertData(data),
        symbolSize: function(val, even) {
          return val[2] / 10
        },
        encode: {
          value: 2,
        },
        label: {
          formatter: '{b}',
          position: 'right',
          show: false,
        },
        emphasis: {
          label: {
            show: true,
          },
        },
      },
      {
        name: 'Top 5',
        type: 'effectScatter',
        coordinateSystem: 'bmap',
        data: convertData(
          data
            .sort(function(a, b) {
              return b.value - a.value
            })
            .slice(0, 5)
        ),
        symbolSize: function(val) {
          // console.log(1)
          return val[2] / 10
        },
        encode: {
          value: 2,
        },
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke',
        },
        label: {
          formatter: '{b}',
          position: 'right',
          show: true,
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: '#333',
        },
        emphasis: {
          scale: true,
        },
        zlevel: 1,
      },
    ],
  }
  option && myChart.setOption(option)
  myChart.on('click', function(params) {
    router.push({ path: '/value', query: { name: params.data.name } })
  })
})
</script>
<style>
.BMap_cpyCtrl {
  display: none;
}

.anchorBL {
  display: none;
}
</style>
